<template>
    <div class="new_comment">
        <h4 class="title">
            <NewCommentIcon class="title_icon" />
            最新评论
        </h4>
        <ul class="hot_list">
            <li class="item" v-for="(item, i) in NewCommentList" :key="i">
                <RouterLink to="">{{ item.author }}：{{ item.content }}</RouterLink>
            </li>
        </ul>
    </div>
</template>


<script lang="ts" setup>
import NewCommentIcon from '@/components/icons/newCommentIcon.vue'
import { ref, onMounted } from 'vue';
import type { newComment } from '@/components/home/type/newComment';
import { newCommentList } from '@/api/api'

const NewCommentList = ref<newComment[]>();
async function getNewCommon() {
  const res = await newCommentList
  NewCommentList.value = res.data;
}
getNewCommon();

</script>


<style lang="less" scoped>
.new_comment {
    margin-top: 50px;

    .title {
        display: flex;
        font-size: 16px;
        font-weight: 600;

        .title_icon {
            width: 17px;
            margin-right: 8px;
        }
    }

    .hot_list {
        margin-top: 20px;

        .item {
            font-size: 14px;
            margin-bottom: 12px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* 超出几行省略 */
            -webkit-line-clamp: 2;
            overflow: hidden;

            a {
                color: var(--info-color);

                &:hover {
                    color: var(--black-primary);
                    font-weight: 600;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
</style>